<template>
  <app-header>星座物语</app-header>
  <appNavBar></appNavBar>
  <ErrorTip></ErrorTip>
  <router-view v-slot="{ Component }" v-if="!errorCode">
    <keep-alive>
      <component :is="Component"></component>
    </keep-alive>
  </router-view>
  <appTab></appTab>
</template>

<script>
import appHeader from "@/components/Header";
import appTab from "@/components/Tab";
import appNavBar from "@/components/NavBar";
import ErrorTip from "@/components/ErrorTip";
import { useStore } from 'vuex';
import { watch, computed } from 'vue';
import { useRouter } from 'vue-router';
export default {
  components: { appHeader, appTab, appNavBar, ErrorTip },

  setup() {
    const store = useStore(),
    router = useRouter(),
    state = store.state;
    router.push('/');
    store.commit('setField', 'today');
    watch(() => router.currentRoute.value.name, value => {
      store.commit('setField', value)
    });

    return {
      errorCode: computed(() => state.errorCode)
    }
  }
};
</script>

<style lang="scss">
#app {
  @apply h-screen;
}
</style>
